<template lang="pug">
  section
    Form(:label-width='70',inline).log-header
      aside
        FormItem(label='时间')
          DatePicker(placeholder='开始时间',format="yyyy年MM月dd日",v-model='startTime',@on-open-change="handleSetDateReadonly")
          span.collect-interval -
          DatePicker(placeholder='结束时间',format="yyyy年MM月dd日",v-model='endTime',@on-open-change="handleSetDateReadonly")
        FormItem(label='任务创建者').collect-creater
          Input(placeholder='任务创建者',v-model='formValidate.taskCreator')
      aside
        FormItem(label='采集url')
          Input(placeholder='采集url',v-model='formValidate.collectionUrl')
        FormItem(label='任务名称')
          Input(placeholder='任务名称',v-model='formValidate.taskName')
        FormItem(label='站点名称')
          Input(placeholder='站点名称',v-model='formValidate.siteName')
        FormItem(style='margin-left:-60px')
          Button(type='primary',style='margin-right:10px',@click='handleUpdateTableData()') 查询
          Button(style='margin-right:10px',@click='handleReset') 重置
          Button(v-if="collectBtnStatus",type='primary',ghost,@click='handleDown') 下载
    show-table(ref='logTab',:total='total',:current='current',:columns='columns',:data='tabData',@handleChangePage='handleChangePage')
</template>

<script>
import asynclog from '../api'
import showTable from '@/components/show-table/show-table'

export default {
  name: 'LogCollect',
  components: { showTable },
  props: { collectBtnStatus: Boolean },
  data() {
    return {
      startTime: '',
      endTime: '',
      formValidate: {
        collectionUrl: '',
        taskName: '',
        siteName: '',
        taskCreator: ''
      },
      total: 0,
      current: 1,
      tabData: [],
      columns: [
        {
          title: '任务名称',
          align: 'center',
          key: 'taskName'
        },
        {
          title: '采集器Url',
          align: 'center',
          key: 'collectionUrl'
        },
        {
          title: '采集器IP',
          align: 'center',
          key: 'collectorIp'
        },
        {
          title: '爬虫编号',
          align: 'center',
          key: 'reptilianId'
        },
        {
          title: '分类',
          align: 'center',
          key: 'typeId'
        },
        {
          title: '日志信息',
          align: 'center',
          key: 'logInformation'
        },
        {
          title: '任务ID',
          align: 'center',
          key: 'taskId'
        },
        {
          title: '站点名称',
          align: 'center',
          key: 'siteName'
        },
        {
          title: '任务创建者',
          align: 'center',
          key: 'taskCreator'
        },
        {
          title: '日志等级',
          align: 'center',
          key: 'logRank'
        },
        {
          title: '时间',
          width: 155,
          align: 'center',
          render: (h, params) => {
            return h('span', this.$dayjs(params.row.collectionLogTime).format('YYYY年MM月DD日 HH:mm:ss'))
          }
        }
      ]
    }
  },
  mounted() {
    this.handleTableData()
  },
  methods: {
    handleChangePage(pageSub) {
      this.handleUpdateTableData(pageSub)
    },
    handleUpdateTableData(current = 1) {
      this.current = current
      this.handleTableData()
    },
    handleReset() {
      this.startTime = this.endTime = ''
      this.formValidate = { collectionUrl: '', taskName: '', siteName: '', taskCreator: '' }
      this.handleUpdateTableData()
    },
    handleDown() {
      location.href = `${process.env.VUE_APP_BASE_API}/log_centor/collection_Download?token=${this.$cookie.get('token')}`
    },
    handleTableData: async function() {
      if (this.startTime > this.endTime) {
        this.$Message.warning('结束时间不得少于开始时间')
        return
      }
      try {
        this.tabData = []
        this.total = 0
        this.$refs['logTab'].loading = true
        const tabData = await asynclog.collectionLogList({
          data: Object.assign({ pageIndex: this.current, pageSize: this.$refs['logTab'].pageSize }, this.formValidate, {
            startTime: this.startTime === '' ? '' : +this.$dayjs(this.startTime),
            endTime: this.endTime === '' ? '' : +this.$dayjs(this.endTime)
          })
        })
        this.tabData = tabData.data.data
        this.total = tabData.data.totalCount
        this.$refs['logTab'].loading = false
      } catch (error) {
        this.$refs['logTab'].loading = false
      }
    },
    handleSetDateReadonly() {
      document.querySelectorAll('.ivu-input')[0].setAttribute('readonly', true)
      document.querySelectorAll('.ivu-input')[1].setAttribute('readonly', true)
    }
  }
}
</script>

<style lang="scss">
@import '../index.scss';
</style>
